<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mamma</title>

<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
	
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="../js/imgLiquid-min.js"></script>
<script src="../js/jquery.slimscroll.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<script src="../js/jquery.form.js"></script>

<script>
	$(document).ready(function() {
		setState();
		gohome();
		profileMenu();
		searchMenu('../friends/');
		button();
		$('div.profilePhotoFrame').imgLiquid();
	});

	function setState() {
		var state = "${memberVo.hometown}";
		$('option[value=' + state + ']').attr('selected', "selected");
	}
	function gohome() {
		$('#gohome').on('click', function() {
			window.location.href = "/mamma/sanghyun/backHome.action";
		});
	}
	// profile menu
	function profileMenu() {
		$('div.info').click(function() {
			$('#profileMenu').toggle();
		});
	}
	
	function button(){
		$("#form1 input").button();
		$('div.otherInfo input.update').button();
		
		var bar = $('#progressbar').progressbar({
		      value: 0
		});
		$('#form1').ajaxForm({
			beforeSubmit: function() {
	            bar.val(0);
			}
			, uploadProgress: function(event, position, total, percentComplete){
				bar.val(percentComplete);
			}
			, error: function(){
				alert('error');
			}
			, complete: function(){
				$('#completeUpload').text('완료되었습니다');
				setTimeout(function(){
					$('#completeUpload').text('업로드할 사진을 고르고, 업로드 버튼을 누르세요');
				}, 2000);
			}
			, success: function(json){
				var html= "";
				html += '<img src="../photoData/'+json.savedFile+'" />';
				$('.profilePhotoFrame').html();
				$('.profilePhotoFrame').html(html);
				$('div.profilePhotoFrame').imgLiquid();
			}
			, clearForm: true
		});
	}
</script>
<style type="text/css">
body > * { z-index: 1}
#home {
	z-index: 2;
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
}
.mainForm {
	margin: 0 auto;
	width: 1024px;
}
div.menu {
	float: left;
	width: 280px;
	height: 600px;
	box-shadow: 0px 2px 0px 0px rgba(255,148,152,1);
	background-color: white;
	
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	border-top: 1px solid lightgray;
	
	visibility: hidden;
}
div.mainContent {
	position: relative;
	float: left;
	width: 700px;
	height: 600px;
	margin-left: 20px;
	box-shadow: 0px 2px 0px 0px rgba(255,148,152,1);
	background-color: white;
	
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	border-top: 1px solid lightgray;
}
div.updateTitle {
	height: 50px;
	padding-top: 20px;
	padding-left: 40px;
	border-bottom: 1px solid lightgray;
}
div.updateTitle span.title {
	font-size: 20pt;
	color: black;
	letter-spacing: 5px;
}
div.updateTitle hr{
	border-bottom: 0;
	width: 90%;
}
div.profilePhotoFrame {
	float: left;
	box-shadow: 0px 2px 0px 0px rgba(255,148,152,1);
	background-color: white;
	
	height: 150px;
	width: 150px;
	
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	border-top: 1px solid lightgray;
	
	position: relative;
	margin-left: 50px;
	margin-top: 30px;
}
div.profilePhotoFrame img {
	max-height: 150px;
	max-width: 150px;
}
div.photoChange {
	float: left;
	
	height: 150px;
	width: 450px;	
	
	position: relative;
	margin-top: 30px;
}
#completeUpload{
	width: 400px;
	height: 25px;
	position: absolute;
	
	margin-top: 20px;
	margin-left: 40px;
	
	padding-top: 5px;
	
	font-size: 11pt;
	text-align: center;
	font-weight: bold;
	
	border: 1px solid lightgray;
}
#form1 {
	position: relative;
	margin-top: 80px;
	margin-left: 50px;
}
#form1 input[type=file] {
	height: 25px;
	width: 200px;
	font-size: 10pt;
}
#form1 input[type=submit] {
	height: 37px;
	width: 150px;
	font-size: 10pt;
}
div.otherInfo {
	position: relative;
	margin-top: 200px;
}
div.otherInfo input.update {
	font-size: 10pt;
}
div.updateTitle2 {
	width: 180px;
	height: 50px;
	float: left; 
	
	font-size: 12pt;
	text-align: right;
	padding-top: 20px;
	padding-right: 20px;
}
div.updateContent {
	width: 480px;
	height: 55px;
	float: left; 
	
	padding-left: 20px;
	padding-top: 15px;
}
div.updateContent input{
	width: 278px;
	height: 30px;
	font-size: 10pt;
	border-radius: 3px;
	border: 1px solid lightgray;
	padding-left: 10px;
	padding-right: 10px;
}
div.updateContent select {
	width: 250px;
	height: 30px;
	font-size: 12pt;
	border-radius: 3px;
	border: 1px solid lightgray;
	padding-left: 10px;
	padding-right: 10px;
}
div.setButton {
	position: absolute;
	margin-top: 250px;
	margin-left: 220px;
}


		/* footer */
#footer{
	margin: 0 auto;
	word-spacing: 10px;
	color: #FF5459;
	font-size: 9pt;
	width: 1030px;
	background-color: #f7f6f6;
	height: 20px;
	text-align: center;
	padding-top: 80px;
	
	margin-top: 10px;
}
</style>
</head>
<body>
<!-- 헤더 부분 -->
<jsp:include page="../account/header.jsp" />

<!-- 메인 콘텐츠 부분 -->	
<div id="home">
	<div class="mainForm content mainHome">
		<!-- menu -->
		<div class="menu">
		
		</div>
		
		<!-- content -->
		<div class="mainContent">
			<div class="updateTitle">
				<span class="title">회원 수정</span>
			</div>
			<div class="profilePhotoFrame">
				<s:if test="%{savedFile != null}">
					<img src="../photoData/${savedFile}" />
				</s:if>
				<s:else>
					<img src="../image/profile.png" />
				</s:else>
			</div>
			<div class="photoChange">
				<div id="completeUpload">업로드할 사진을 고르고, 업로드 버튼을 누르세요</div>
			    <form id="form1" method="post" enctype="multipart/form-data" action="updateProfile.action"  >
			        <input type='file' id="upload" name="upload"/>
			        <input type="submit" value="업로드" ><br/>
			    </form>
		    </div>
		    <div class="otherInfo">
			    <form action="profileUpdate.action" method="post" id="form2">
			   		<input type="hidden" value="<s:property value='memberVo.email'/>" name="memberVo.email"> 
			    	
			    	<div class="updateTitle2">별명</div>
			    	<div class="updateContent">
			    		<input type="text" value="<s:property value='memberVo.nickname'/>" id="nickname" name="memberVo.nickname">
			    	</div>
			    	<div class="updateTitle2">비밀번호</div>
			    	<div class="updateContent">
			    		<input type="password"  id="password" name="memberVo.password">
			    	</div>
			    	<div class="updateTitle2">거주지역</div>
			    	<div class="updateContent">
						<select id="state" name="memberVo.hometown">
							<option value="서울">서울</option>
							<option value="경기">경기</option>
							<option value="인천">인천</option>
							<option value="강원">강원</option>
							<option value="충남">충남</option>
							<option value="충북">충북</option>
							<option value="대전">대전</option>
							<option value="세종">세종</option>
							<option value="부산">부산</option>
							<option value="울산">울산</option>
							<option value="대구">대구</option>
							<option value="경북">경북</option>
							<option value="경남">경남</option>
							<option value="광주">광주</option>
							<option value="전북">전북</option>
							<option value="전남">전남</option>
							<option value="제주">제주</option>
						</select>
					</div>
					<div class="setButton">
						<input class="update" type="submit" value="회원 정보 수정">
					</div>
			    </form>
		    </div>
	    </div>
    </div>
    
</div>
</body>
</html>